<template>
	<page-meta :page-style="'overflow:'+(isDrawLosePop||isDrawPop?'hidden':'visible')"></page-meta>
	<view class="draw">
		<view v-if="showDrawInfo">
			<image @load="loadBkImg" class="draw_bk_img" :src="picUrl+lotteryinfo.background" mode="widthFix"></image>
			<view class="draw_box" v-if="showPrizeBox">
				<uni-row :gutter="10">
					<uni-col v-for="(item,index) in prizelist" :key="item.id" :span="8">
						<view class="prize_box">
							<view class="prize_img_box">
								<image class="prize_img" :src="picUrl+item.url" mode="aspectFit"></image>
							</view>
							<view class="prize_name">{{item.name}}</view>
							<image v-if="amplification_index===item.id" class="prize_border_img"
								:src="onlinePic+'draw/prize_border.png'"></image>
						</view>
					</uni-col>
				</uni-row>
				<image v-if="roll_flag==1" class="draw_start_img" :src="onlinePic+'draw/draw_start.png'"
					mode="aspectFill" @click="startrolling">
				</image>
				<image v-else class="draw_start_img" :src="onlinePic+'draw/draw_default.png'" mode="aspectFill">
				</image>
			</view>
			<view class="draw_text_box" v-if="showPrizeBox">
				<text>{{lotteryinfo.rule}}</text>
			</view>
		</view>
		<view class="guide_mask_box" v-if="isDrawLosePop||isDrawPop" @click="colseGroupPopup"></view>
		<view class="draw_pop" v-if="isDrawPop">
			<image class="win_pop_img" :src="picUrl+lotteryinfo.popup" mode="widthFix"></image>
			<view class="draw_pop_text">
				<view class="f-20 f-w">{{popup_title}}</view>
				<view class="f-18 mt-5"><text>{{popup_desc}}</text></view>
				<image class="pop_prize_img" :src="picUrl+resultinfo.gifts_url" mode="aspectFit"></image>
			</view>
			<view class="draw_pop_btn" @click="goDrawAddress">查看领奖码</view>
			<view class="draw_pop_close_icon_box">
				<uni-icons class="draw_pop_close_icon" @click="closeDrawPopup" type="close" color="#ffffff"
					size="50"></uni-icons>
			</view>
		</view>
		<view class="draw_lose_pop" v-if="isDrawLosePop">
			<image class="lose_pop_img" :src="picUrl+lotteryinfo.popup_lose" mode="widthFix"></image>
			<view class="lose_pop_text">
				<view class="f-20 f-w">{{popup_title}}</view>
				<view class="f-18 mt-5"><text>{{popup_desc}}</text></view>
			</view>
			<view class="lose_pop_btn" @click="goQaStart">去参加老“斯机”挑战赛</view>
			<view class="mt-15 text-c">
				<uni-icons class="lose_pop_close_icon" @click="closeDrawPopup" type="close" color="#ffffff"
					size="50"></uni-icons>
			</view>
		</view>
		<view class="guide_mask_box" v-if="isHasGroupPop"></view>
		<view class="draw_lose_pop" v-if="isHasGroupPop">
			<image class="lose_pop_img" :src="picUrl+lotteryinfo.popup_lose" mode="widthFix"></image>
			<view class="lose_pop_text">
				<view class="f-20 f-w">{{popup_title}}</view>
				<view class="f-18 mt-5"><text>{{popup_desc}}</text></view>
			</view>
			<view class="lose_pop_btn" @click="goGroupInfo">进入车友会</view>
		</view>
	</view>
</template>

<script>
	import {
		getHuodongLotteryInfo,
		getHuodongLottery
	} from '@/api/motortime.js';
	const app = getApp()
	export default {
		data() {
			return {
				lotteryinfo: '',
				prizelist: [],
				prize_name: '',
				prize_img: '',
				last_index: 0, //上一回滚动的位置
				amplification_index: 0, //轮盘的当前滚动位置
				roll_flag: 1, //是否允许滚动
				max_number: 6, //轮盘的全部数量
				speed: 300, //速度，速度值越大，则越慢 初始化为300
				finalindex: '', //几等奖！
				myInterval: "", //定时器
				max_speed: 40, //滚盘的最大速度
				minturns: 8, //最小的圈数为2
				runs_now: 0, //当前已跑步数
				isDrawPop: false,
				isDrawLosePop: false,
				showPrizeBox: false,
				showDrawInfo: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				gifts_status: 0, //0=未中奖;1=已中奖，未领取;2=已中奖，已领取
				resultinfo: '',
				popup_title: '',
				popup_desc: '',
				isHasGroupPop: false
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				if (uni.getStorageSync('onload')) {
					uni.showLoading({})
					this.getHuodongLotteryInfo()
				}
			}
		},
		onLoad: function(options) {
			if (uni.getStorageSync('access_token')) {
				uni.showLoading({})
				this.getHuodongLotteryInfo()
			}
		},
		methods: {
			getHuodongLotteryInfo() {
				getHuodongLotteryInfo().then(res => {
					if (res.state == 1) {

						if (res.data.info.club_join_type == 3) {
							uni.hideLoading()
							this.lotteryinfo = res.data.info
							this.prizelist = res.data.info.prizelist
							this.roll_flag = res.data.info.status
							
							if (res.data.info.status == 2) {
								if (res.data.info.gifts_status == 0) {
									this.isDrawLosePop = true
									this.showDrawInfo = true
								} else if (res.data.info.gifts_status == 1 || res.data.info.gifts_status == 2) {
									uni.redirectTo({
										url: '/pages/draw/huodongdrawresult'
									})
								}
								this.popup_title = res.data.info.popup_title
								this.popup_desc = res.data.info.popup_desc
								this.amplification_index = res.data.info.gifts_id
							}else{
								this.showDrawInfo = true
							}
						} else if (res.data.info.club_join_type == 2) {
							uni.redirectTo({
								url: '/pages/group/groupjoin'
							})
							uni.hideLoading()
						} else if (res.data.info.club_join_type == 1) {
							this.showDrawInfo = true
							uni.hideLoading()
							this.lotteryinfo = res.data.info
							this.prizelist = res.data.info.prizelist
							this.roll_flag = res.data.info.status
							this.isHasGroupPop = true
							this.popup_title = res.data.info.popup_title
							this.popup_desc = res.data.info.popup_desc
						}


					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			loadBkImg() {
				this.showPrizeBox = true
			},
			//九宫格
			startrolling() {
				this.runs_now = 0;
				if (this.roll_flag == 1) {
					this.amplification_index = 0
					this.roll_flag = 2;
					getHuodongLottery().then(res => {
						if (res.state == 1) {
							this.finalindex = parseInt(res.data.info.gifts_id)
							this.resultinfo = res.data.info
							this.popup_title = res.data.info.popup_title
							this.popup_desc = res.data.info.popup_desc
							this.rollingd();
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})

				}


			},
			rollingd() {
				var that = this
				that.myInterval = setTimeout(function() {
					that.rollingd(that.amplification_index);
				}, that.speed);
				that.runs_now++; //已经跑步数加一
				that.amplification_index++; //当前的加一
				//获取总步数，接口延迟问题，所以最后还是设置成1s以上
				var count_num = that.minturns * that.max_number + that.finalindex - that.last_index;
				//上升期间
				if (that.runs_now <= (count_num / 3) * 2) {
					that.speed -= 30; //加速
					if (that.speed <= that.max_speed) {
						that.speed = that.max_speed; //最高速度为40；
					}
				} else if (that.runs_now >= count_num) { //抽奖结束
					clearInterval(that.myInterval);
					console.log("抽奖结束------" + that.roll_flag)
					if (that.amplification_index == 7) { //判定！是否大于最大数
						that.amplification_index = 1;
					}
					// var item = that.prizelist.find(function(item) {
					// 	return that.amplification_index == item.id
					// });
					// that.prize_name = item.name
					// that.prize_img = item.url
					setTimeout(function() {
						if (that.resultinfo.gifts_status == 0) {
							that.isDrawLosePop = true
						} else {
							that.isDrawPop = true
						}
						// that.roll_flag = 1;
					}, 500)

				} else if (count_num - that.runs_now <= 10) { //下降期间
					that.speed += 20;
				} else { //缓冲区间
					that.speed += 10;
					if (that.speed >= 100) {
						that.speed = 100; //最低速度为100；
					}
				}
				if (that.amplification_index > that.max_number) { //判定！是否大于最大数
					that.amplification_index = 1;
				}
			},
			goDrawAddress() {
				uni.redirectTo({
					url: '/pages/draw/huodongdrawresult'
				})
			},
			goQaStart() {
				uni.redirectTo({
					url: '/pages/qa/qastart/qastart?subject_id=4'
				})
			},
			closeDrawPopup() {
				this.isDrawPop = false
				this.isDrawLosePop = false
			},
			goGroupInfo() {
				if (uni.getStorageSync('userinfo').club_id == 0) {
					uni.redirectTo({
						url: '/pages/group/groupjoin'
					})
				} else {
					uni.redirectTo({
						url: '/pages/group/groupinfo?club_id=' + uni.getStorageSync('userinfo').club_id
					})
				}
				
			}
		},
	}
</script>

<style lang="scss">
	.draw {
		position: relative;

		.draw_bk_img {
			width: 100%;
			vertical-align: middle;
		}

		.draw_box {
			position: absolute;
			left: 0;
			right: 0;
			top: 375rpx;
			z-index: 1;
			padding: 0 112rpx;
		}

		.prize_box {
			width: 170rpx;
			height: 145rpx;
			margin-bottom: 10rpx;
			border-radius: 8rpx;
			position: relative;
			background-color: #ffffff;

			.prize_img_box {
				width: 170rpx;
				height: 100rpx;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.prize_img {
				width: 170rpx;
				height: 100rpx;
				vertical-align: middle;
			}

			.prize_name {
				width: 170rpx;
				height: 45rpx;
				font-size: 24rpx;
				color: #021F56;
				background-color: rgba(167, 186, 226, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom-left-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
			}

			.prize_border_img {
				width: 170rpx;
				height: 145rpx;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;
			}
		}

		.draw_start_img {
			width: 100%;
			height: 100rpx;
			margin-top: 30rpx;
			vertical-align: middle;
		}

		.draw_text_box {
			height: 325rpx;
			position: absolute;
			left: 76rpx;
			right: 76rpx;
			bottom: 130rpx;
			overflow-y: auto;
			color: #614C29;
			font-size: 22rpx;
			line-height: 38rpx;
			padding-right: 40rpx;
		}

		.draw_text_box::-webkit-scrollbar {
			width: 10rpx;
		}

		.draw_text_box::-webkit-scrollbar-thumb {
			border-radius: 6rpx;
			background: #F1E1C6;
		}

		.draw_text_box::-webkit-scrollbar-track {
			border-radius: 10px;
			background: #ffffff;
		}

	}
</style>